/* ================================== 全局容器样式 ================================== */
/* 根容器：全屏高度 + 溢出隐藏（避免页面整体滚动） */
.manager-container {
    min-height: 100vh; /* 最小高度占满视口，适配短内容页面 */
    overflow: hidden;  /* 隐藏容器内溢出内容，防止全局滚动条 */
}

/* ================================== 顶部导航栏样式 ================================== */
/* 顶部导航：横向布局 + 渐变色背景 */
.manager-header {
    display: flex;
    background-image:linear-gradient(#0ba360 0%,#3cba92 100%)
}

/* 顶部左侧：系统图标+名称容器（固定宽度200px） */
.manager-header-left {
    width: 200px;
    height: 60px; /* 与顶部导航高度一致 */
    padding-left: 10px;
    display: flex;
    align-items: center; /* 垂直居中 */
}

/* 系统图标：固定尺寸，避免拉伸 */
.manager-header-left img {
    width: 35px;
    height: 35px;
}

/* 系统名称：自适应剩余空间 + 样式优化 */
.manager-header-left .title {
    flex: 1; /* 占满左侧剩余空间 */
    margin-left: 5px;
    font-size: 17px;
    font-weight: bold;
    color: #eee; /* 浅色文字适配深色渐变背景 */
}

/* 顶部中间：自适应宽度（占位，可后续加搜索/导航） */
.manager-header-center {
    flex: 1; /* 占满顶部中间剩余空间 */
    width: 0; /* 配合flex，避免内容溢出 */
    display: flex;
    align-items: center;
}

/* 顶部右侧：用户信息容器（固定宽度200px，右对齐） */
.manager-header-right {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 内容右对齐 */
}

/* 用户头像区域：文字颜色+鼠标样式（非可点击，避免误导） */
.manager-header-right .avatar {
    display: flex;
    align-items: center;
    padding-right: 10px; /* 右侧内边距，避免贴边 */
    color: #eee; /* 与系统名称同色，保持顶部视觉统一 */
    cursor: default; /* 非点击态，清除手型光标 */
}

/* 用户头像：圆形裁剪 + 右侧间距 */
.manager-header-right .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* 圆形头像 */
    margin-right: 5px;  /* 与用户名间距 */
}


/* ================================== 主体内容区样式（左侧菜单+右侧内容） ================================== */
/* 主体容器：横向布局，拆分左右两栏 */
.manager-main {
    display: flex;
}

/* 左侧菜单：固定宽度+阴影 + 全屏高度（减去顶部导航高度60px） */
.manager-main-left {
    width: 200px; /* 与顶部左侧宽度一致，视觉对称 */
    min-height: calc(100vh - 60px); /* 高度 = 视口高度 - 顶部导航高度 */
    box-shadow: 0 0 6px rgba(0, 21, 41, .35); /* 右侧阴影，区分菜单与内容区 */
}

/* 右侧内容区：自适应宽度 + 内边距（避免内容贴边） */
.manager-main-right {
    flex: 1; /* 占满主体剩余空间 */
    width: 0; /* 配合flex，防止内容溢出 */
    padding: 10px; /* 内边距，优化内容与边框距离 */
}

/* 右侧搜索区：白色背景 + 圆角 + 阴影（区分模块） */
.manager-main-right .search {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px; /* 圆角优化视觉 */
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); /* 轻微阴影，提升层次感 */
}

/* 右侧操作区：与搜索区同样式，顶部间距5px */
.manager-main-right .operation {
    margin-top: 5px; /* 与上方搜索区间距 */
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

/* 右侧表格区：与上方模块同样式，顶部间距5px */
.manager-main-right .table {
    margin-top: 5px; /* 与上方操作区间距 */
    padding: 15px 10px; /* 上下内边距15px，左右10px */
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 稍深阴影，突出表格核心区 */
}

/* 分页控件：顶部间距10px，与表格内容区分 */
.manager-main-right .table .pagination {
    margin-top: 10px;
}


/* ================================== ElementUI 组件样式覆盖（按需定制） ================================== */
/* 左侧菜单组件（el-menu） */
/* 菜单容器：宽度与左侧栏一致，高度占满父容器 */
.el-menu {
    width: 200px;
    height: 100%;
}

/* 菜单标题（一级子菜单）：固定高度50px，居中对齐 */
.el-submenu__title {
    height: 50px;
    line-height: 50px; /* 行高=高度，文字垂直居中 */
}

/* 菜单项（el-menu-item）：固定高度50px + 定位基准（为右侧竖线准备） */
.el-menu-item {
    height: 50px;
    line-height: 50px;
    position: relative; /* 关键：为选中态右侧竖线提供绝对定位基准 */
}

/* 菜单图标颜色（区分一级/二级菜单） */
/* 一级菜单图标：深色（#222），适配默认背景 */
.el-submenu__title i {
    color: #222222 !important;
}
/* 二级菜单图标：默认深色（#222），选中后变蓝 */
.el-menu-item i {
    color: #222222 !important;
}

/* 菜单交互样式（选中/悬浮） */
/* 选中态：背景色+文字色+右侧竖线 */
.el-menu-item.is-active {
    background-color: #ecf5ff !important; /* 浅蓝色背景，不刺眼 */
    color: #3cba92 !important; /* 蓝色文字，突出选中 */
}

/* 选中态右侧竖线：伪元素实现（紧贴右侧，全屏高） */
.el-menu-item.is-active::after {
    content: ''; /* 伪元素必须有content（空值也可） */
    position: absolute; /* 绝对定位到右侧 */
    right: 0; /* 紧贴菜单右侧边框 */
    top: 0; /* 从顶部开始 */
    height: 100%; /* 竖线高度=菜单项高度 */
    width: 3px; /* 竖线粗细，视觉适中 */
    background-color: #3cba92; /* 与文字同色，视觉统一 */
}

/* 选中态图标：同步变蓝 */
.el-menu-item.is-active i {
    color: #3cba92 !important;
}

/* 悬浮态（未选中）：白色背景+蓝色文字，hover时突出 */
.el-menu-item:not(.is-active):hover {
    background-color: #ffffff !important;
    color: #3cba92 !important;
}
/* 悬浮态图标：同步变蓝 */
.el-menu-item:not(.is-active):hover i {
    color: #3cba92 !important;
}

/* 二级菜单缩进：左侧 padding 50px，区分层级 */
.el-menu--inline .el-menu-item {
    padding-left: 50px !important;
}

/* 面包屑组件（el-breadcrumb）：适配顶部渐变背景 */
/* 面包屑文字：浅色（#eee），与系统名称同色 */
.el-breadcrumb__inner {
    color: #eee !important;
}
/* 面包屑左侧间距：与顶部左侧图标区对齐 */
.el-breadcrumb {
    margin-left: 10px;
}

/* 下拉菜单（el-dropdown-menu）：顶部间距优化（避免贴边） */
.el-dropdown-menu {
    margin-top: 20px !important; /* 与触发按钮间距20px，防止重叠 */
}

/* 表格组件（el-table）：表头样式优化 */
/* 表头文字：灰色（#666），不刺眼且突出内容 */
th.el-table__cell {
    color: #666;
}

/* ================================== 抽屉组件（自定义弹窗）样式 ================================== */
/* 抽屉头部：横向布局 + 下边框（区分头部与内容） */
.drawer-header {
    display: flex;
    justify-content: space-between; /* 标题左对齐，按钮右对齐 */
    align-items: center; /* 垂直居中 */
    padding: 20px 20px 10px; /* 上20px，左右20px，下10px */
    border-bottom: 1px solid #eee; /* 下边框，区分区域 */
}

/* 抽屉标题：加粗 + 字号18px，突出层级 */
.drawer-title {
    font-size: 18px;
    font-weight: bold;
}

/* 抽屉头部按钮区：横向布局 + 间距5px */
.drawer-actions {
    display: flex;
    gap: 5px; /* 按钮之间间距 */
}

/* 抽屉内容区：内边距 + 滚动优化（内容过多时可滚动） */
.drawer-content {
    padding: 20px;
    overflow-y: auto; /* 垂直方向可滚动 */
    max-height: calc(100vh - 100px); /* 最大高度=视口高度-100px，避免超出屏幕 */
}

/* 图片容器：上下间距20px + 居中对齐 */
.image-container {
    margin: 20px 0;
    text-align: center;
}

/* 图片样式：自适应宽度 + 圆角 + 阴影（优化视觉） */
img {
    max-width: 100%; /* 图片最大宽度不超过容器 */
    height: auto; /* 保持图片比例 */
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 抽屉底部：上边框 + 右对齐（按钮区） */
.drawer-footer {
    padding: 20px;
    border-top: 1px solid #eee; /* 上边框，区分内容与底部 */
    text-align: right; /* 按钮右对齐 */
}

/* ================================== 全屏模式样式（适配抽屉全屏） ================================== */
/* 兼容各浏览器：全屏时抽屉内容区样式（白色背景 + 居中布局） */
.drawer-content:-webkit-full-screen,
.drawer-content:-moz-full-screen,
.drawer-content:-ms-fullscreen,
.drawer-content:fullscreen {
    background-color: white; /* 全屏时白色背景，避免透明 */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* 纵向布局 */
    justify-content: flex-start; /* 内容靠上 */
    align-items: center; /* 内容居中 */
}
